<template>
    <el-dialog
         :show-close="false"
         width="60%"
     >
         <div class="split-container">
            <div class="split-container-title">分单确认</div>
            <div class="split-container-dish" >转出菜品：<span class="value" v-for="(v,k) in detail" :key="k"><span v-if="k != 0">,</span>{{v.itemName}}*{{ v.itemQty }}</span></div>
            <div class="split-container-from">转出桌号：<span class="value">{{ sourceRoomName }}</span></div>
            <div style="padding: 0 4px;">
            <div class="split-tab" >
                <div class="tab-item" :class="{ active: tableSelectActive == k }" v-for="(v, k) in zoneList" :key="k" @click="onChangeTab('tableSelect', k)">
                    <div>{{v.roomAreaName}}</div>
                    <div class="tab-item-bottom" :class="{ active: tableSelectActive == k }"></div>
                </div>
            </div>
            </div>
            
            <div class="split-main" @click="onSelectTable">
            <div class="split-main-item" :data-id="k" :data-name="v.roomName" :data-code="v.roomCode" :class="{ active: tabSelActive == k }" v-for="(v, k) in freeTableList" :key="k">
                <div class="item-top" :data-id="k">{{ v.roomStateDesc }}</div>
                <div class="item-name" :data-id="k">{{ v.roomName }}</div>
                <div class="item-center" :data-id="k">{{ v.maxPeople }}座</div>
                <div class="item-min" :data-id="k">低消：{{ v.minConsume }}</div>
                
            </div>
            <div class="split-main-item spe" data-type="up" :class="{canNotUse:usePostForm.pageIndex == 1}" @click="onChangePage">上页</div>
            <div class="split-main-item spe" data-type="down" :class="{canNotUse:freeTableList.length < usePostForm.pageSize}" @click="onChangePage">下页</div>
            </div>
            <div class="split-msg">
                <div class="split-msg-title">本次分单是否要打印分单小票？</div>
                <el-radio-group v-model="isPrint" >
                          <el-radio value="1">是</el-radio>
                          <el-radio value="0">否</el-radio>
                </el-radio-group>
            </div>
            <div class="popup-btn" style="padding: 0 4px;">
                <div class="btn-cancle" @click="onCancel">取消</div>
                <div class="btn-submit" @click="onConfirm">确认</div>
            </div>
         </div>
         <ZDialog v-model="confirmShow" width="60%" title="提示" content="确定要分单吗？" @cancel="confirmShow = false" @confirm="confirmTurnTable()"></ZDialog>
     </el-dialog>
     
 </template>
 <script setup>
 import Api from '@/api'
 import dayjs from "dayjs"
 import useConfigStore from '@/store/config'
 import { getLocalIPv4 } from "@/utils/getip.js";
 import { ElNotification } from 'element-plus'
 import ZDialog from '@/components/Dialog/Dialog.vue'
 
 const router = useRouter()
 const configStore = useConfigStore()
 const props = defineProps({
     detail: {
         type: Array,
         default: []
     },
     sourceRoomCode: {
         type: String,
         default: ''
     },
     sourceRoomName: {
         type: String,
         default: ''
     },
     splitShow:{
        type: Boolean,
        default: true
     },
     state:{
        type: String,
        default: true
     }
 });
 const reserveShow = {reserveAmtState:'1'}
 const sourceRoomCode = ref(props.sourceRoomCode)
const targetRoomCode = ref('')
 const isPrint = ref('1')
 const emits = defineEmits(['update:show', 'cancel', 'confirm']);
 
 const onCancel = () => {
     emits('update:show');
     emits('cancel');
 }
 
 const onConfirm = () => {
     const args = freeTableList.value[tabSelActive.value]
     if(args){
       confirmShow.value = true
       targetRoomCode.value = args.roomCode
     }else{
         ElNotification({
           title: '提示',
           message: '请选择桌台',
           type: 'warning',
         })
         return
     }
 }

//获取ip地址
const ip = ref("");
getLocalIPv4()
    .then((ipAddress) => {
        // 在这里处理获取到的 IP 地址
        ip.value = ipAddress;
        console.log("IP 地址:", ip.value); 
    })
    .catch((error) => {
        console.error("发生错误:", error);
        // 在这里处理错误情况
    });

 const confirmShow = ref(false)

 const TurnTableFlage =  ref(false)
 // 分单
 const confirmTurnTable = ()=>{
    //已结账isFullOrder": "1"
    let params =  {"sourceRoomCode":sourceRoomCode.value,"targetRoomCode":targetRoomCode.value,"detail":props.detail,"isPrint":isPrint.value,"ip":ip.value}
    if(props.state == 2) {
        params.isFullOrder = 1
    } 
    if(TurnTableFlage.value == true) return
    TurnTableFlage.value = true
    Api.Common.PcObjProcess.Do({"functionName":"OpSplitOrderList","contentData":params})
   .then(res=>{
        console.log(res);
        confirmShow.value = false
        ElNotification({
           title: '提示',
           message: res.result,
           type: 'success',
         })
         TurnTableFlage.value = false
        router.back()
   })  .catch(err=>{
       TurnTableFlage.value = false   
    })
 }

 const tableSelectActive = ref(0)
 const onChangeTab = (type,k,v) => {
   switch (type) {
     case 'tableSelect':
       tableSelectActive.value = k
       usePostForm.value.areaCode = zoneList.value[k].roomAreaCode
       getCanUseTables()
       break
   }
   
 }
 const tabSelActive = ref(0) // 选中桌台的下标
 // 桌台选中切换
 const onSelectTable = (e)=>{
   console.log(e.target.dataset);
   if(e.target.dataset.id){
     tabSelActive.value = e.target.dataset.id
   }
 }
 // 空闲桌台弹窗上下页切换
 const onChangePage = (e)=>{
   console.log(e.target.dataset.type);
   if(e.target.dataset.type == 'down'){
     if(freeTableList.value.length<usePostForm.value.pageSize){
       return
     }else{
       usePostForm.value.pageIndex++
     }
     
   }else{
     if(usePostForm.value.pageIndex <= 1){
       return
     }else{
       usePostForm.value.pageIndex--
     }
   }
   getCanUseTables()
 }
 // 获取使用中房台
 const usePostForm = ref({
   reserveTime:'',
   roomState:'2,3',
   typeCode:'',
   pageSize: 38,
   pageIndex: 1
 })
 const freeTableList = ref([])
 const getCanUseTables =  (flag)=>{
   if(flag){
     usePostForm.value.pageIndex = 1
   }
   usePostForm.value.reserveTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
   Api.Common.PcObjProcess.Do({"functionName": "GetReserveRoomList","orgCode": "0004","contentData":usePostForm.value})
   .then(res=>{
    if(res.result[0]){
        freeTableList.value = res.result[0].areaRooms.filter(item => item.roomCode !== sourceRoomCode.value);
    }
   })
 }
 // ------------------------------------------- 获取房台类型 ----------------------------------------
 const zoneList = ref([])
 // 获取房台类型
 const getTableType = () =>{
    let newArray = [{ roomAreaCode: '', roomAreaName: '全部' }]
     Array.prototype.push.apply(newArray, configStore.roomArea)
     zoneList.value = newArray
 }
 getTableType() // 获取房台类型
 getCanUseTables(true) // 获取房台
 </script>
 <style scoped lang="scss">
    .split-container{
        padding: 0 50px;
        .split-container-title{
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 20px;
            color: #212121;
            line-height: 20px;
        }
        .split-container-dish{
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #212121;
            line-height: 18px;
            padding: 19px 0 16px;
            .value{
                color: #FF6A00;
            }
        }
        .split-container-from{
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #212121;
            line-height: 18px;
            padding-bottom: 20px;
            .value{
                color: #FF6A00;
            }
        }
        .split-tab{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 42px;
            background: #F2F2F2;
            border-radius: 8px;
            // padding-left: 8px;
            .tab-item{
            padding: 15px 0px;
            width:16%;
            text-align:center;
            cursor: pointer;
            position: relative;
            &.active{
                color: #FF6A00;
            }
            .tab-item-bottom{
                position:absolute;
                bottom:4px;
                left: 50%; 
                transform: translateX(-50%); 
                width: 24px;
                height: 2px;
                background-color: #FF6A00;
                border-radius: 1px;
                display:none;
                &.active{
                display:block;
                }
            }
            }
        }
        .split-main{
            display: flex;
            align-items: center;
            justify-content: start;
            flex-wrap: wrap;
            padding-top: 20px;
            border-bottom: 1px solid #E6E6E6;
            .split-main-item{
                // flex: 1 0 calc(12.5% - 16px); /* 计算每个子元素的宽度，减去 margin */
                width: calc(12.5% - 16px);
                height: 96px;
                text-align: center;
                font-family: Microsoft YaHei;
                // font-weight: bold;
                font-size: 24px;
                color: #212121;
                line-height: 96px;
                margin: 0 8px 16px 8px;
                background: #FFFFFF;
                border-radius: 8px;
                border: 1px solid #E6E6E6;
                cursor: pointer;
                .item-top{
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FF6A00;
                    line-height: 14px;
                    padding: 7px 0 6px;
                }
                .item-name{
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 24px;
                    color: #212121;
                    line-height: 24px;
                }
                .item-center{
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #212121;
                    line-height: 14px;
                    padding: 8px 0 7px;
                }
                .item-min{
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 12px;
                    color: #212121;
                    line-height: 12px;
                    padding-bottom: 6px;
                }
                &.spe{
                    background: #E6E6E6;
                }
                &.active{
                    background: #FFE566;
                }
                &.canNotUse{
                    background: #F2F2F2;
                    color: #CCCCCC;
                }
            }
        }
        .split-msg{
            display: flex;
            align-items: center;
            padding: 24px 0 120px;
            .split-msg-title{
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #212121;
                line-height: 16px;
                margin-right: 40px;
            }
        }
        ::v-deep(.el-radio__inner ){
            // margin-left: 20px;
            width: 20px;
            height: 20px
        }
        ::v-deep(.el-radio__input.is-checked+.el-radio__label){
            color: #212121;
        }
        ::v-deep(.el-radio__input.is-checked .el-radio__inner ){
            border-color: #ff6a00; /* 选中状态边框颜色 */
            background-color: #ffffff; /* 选中状态背景颜色 */
        }
        ::v-deep(.el-radio__inner:after ){
            background-color: #ff6a00;
            width: 8px;
            height: 8px;
        }
        .popup-btn{
                display: flex;
                align-items: center;
                justify-content: center;
                .btn-cancle{
                    text-align: center;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 24px;
                    color: #FF6A00;
                    line-height: 60px;
                    width: 160px;
                    height: 60px;
                    background: #FFFFFF;
                    border-radius: 8px;
                    border: 1px solid #FF6A00;
                    margin-right: 36px;
                    cursor: pointer;
                }
                .btn-submit{
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 24px;
                    color: #FFFFFF;
                    line-height: 60px;
                    text-align: center;
                    width: 160px;
                    height: 60px;
                    background: #FF6A00;
                    border-radius: 8px;
                    cursor: pointer;
                    }
        }
    }
 </style>